<template>
  <view class="mine">
    <view class="head_view">
      <text class="head">个人中心</text>
    </view>
    <view class="scroll_view">
      <scroll-view scroll-y style="height: 100%; width: 100%">
        <view class="scroll_container">
          <!-- 用户信息 头像 名称 -->
          <view class="user_view">
            <up-avatar
              :src="userInfoData.avatar"
              style="margin-right: 28rpx"
              size="100"
            ></up-avatar>
            <!-- <view class="user_head">
              <image
                style="width: 100%; height: 100%"
                src="@/static/user_default.png"
                mode="aspectFill"
              />
            </view> -->
            <view class="user_info" @click="toUserInfo">
              <text class="user_name">{{ userInfoData.name || "未登录" }}</text>
              <view class="user_edit">
                <text class="edit_text">查看或编辑个人资料</text>
                <u-icon name="arrow-right" color="#a77528" size="22"></u-icon>
              </view>
            </view>
          </view>
          <view class="account_view">
            <text class="text">余额</text>
            <text class="price">¥ {{ userInfoData.wallet }}</text>
            <text class="topup">充值</text>
          </view>
          <view class="order_view">
            <text class="h2">订单列表</text>
            <Order></Order>
            <Order></Order>
            <Order></Order>
            <Order></Order>
            <Order></Order>
            <Order></Order>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import Order from "./component/Order.vue";
import { userInfo } from "./modules/api";
import { onReady } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import DefaultHead from "@/static/user_default.png";

const userInfoData = ref({
  name: "",
  avatar: DefaultHead,
  wallet: "0.00",
});

onReady(() => {
  userInfo().then((data) => {
    if (data) {
      userInfoData.value = data;
    }
  });
});

function toUserInfo() {
  uni.navigateTo({
    url: "/pages/mine/userInfo/index",
  });
}
</script>

<style lang="scss" scoped>
.mine {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../static/user_bg.png") no-repeat;
  background-position: right top;
  background-size: 450rpx;
  background-color: #f8f8f8;

  .scroll_view {
    flex: 1 0 auto;
    height: 0;
    .scroll_container {
      width: 100%;
      padding: 40rpx 30rpx 10rpx;
      .order_view {
        margin-top: 36rpx;
        .h2 {
          font-weight: normal;
          font-size: 28rpx;
          color: #000000;
          line-height: 1;
        }
      }
      .account_view {
        height: 136rpx;
        background: #ffffff;
        border-radius: 10px;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;
        .topup {
          font-weight: normal;
          font-size: 24rpx;
          color: #333333;
          line-height: 1;
        }
        .text {
          font-weight: normal;
          font-size: 28rpx;
          color: #828282;
          line-height: 1;
        }
        .price {
          font-weight: 600;
          font-size: 40rpx;
          color: #eb5757;
          line-height: 1;
          margin-left: 48rpx;
          margin-right: auto;
        }
      }
      .user_view {
        display: flex;
        align-items: center;
        align-content: center;
        .user_info {
          .user_name {
            font-weight: normal;
            font-size: 30rpx;
            color: #000000;
            line-height: 1;
            margin-bottom: 20rpx;
            display: inline-block;
          }
          .user_edit {
            display: flex;
            align-items: center;
            .edit_text {
              font-weight: normal;
              font-size: 24rpx;
              color: #a77528;
              line-height: 1;
              margin-right: 5rpx;
            }
          }
        }
        .user_head {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 28rpx;
        }
      }
    }
  }
  .head_view {
    text-align: center;
    padding: 30rpx 0;
    .head {
      font-weight: normal;
      font-size: 30rpx;
      color: #000000;
      line-height: 35rpx;
    }
  }
}
</style>
